<template>
	<view :style="{height:barHeight+'rpx'}">
		<view class="footer-fixed-container">
			<view :class="['footer-fixed-container__wrapper', isShadow ? 'footer-fixed-container__shadow' : '', isBackground ? 'footer-fixed-container__background' : '']">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 底部悬浮栏
	 * @property {Boolean} isShadow 是否有阴影
	 * @property {Boolean} isBackground 是否有白色背景
	 * @property {String} barHeight 父级撑开高度
	 */
	export default {
		name: 'footerFixedBar',
		props: {
			isShadow: {
				type: Boolean,
				default: true
			},
			isBackground: {
				type: Boolean,
				default: true
			},
			barHeight: {
				type: Number,
				default: 100
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.footer-fixed-container{
		width: 100%;
		position: fixed;
		z-index: 111;
		&__wrapper{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 900;
			
		}
		&__shadow{
			box-shadow: 0 2rpx 24rpx rgba(0,0,0,.2);
		}
		&__background{
			background: $uni-bg-color;
		}
	}
</style>
